<div class='exp-wrap'>
  <div class='exp-det'> 
      {{ companyInfo.det }}
  </div>
  <div class='exp-arrow'> </div>
</div>

<div class='company-info container-fluid'>
  
  <div class='row'>

      <div class="col-md-3 col-xs-4">
          <div class='img-wrap' #headImg></div>
      </div>

      <div class="col-md-7  col-xs-6 exp-tit">
         {{ companyInfo.tit }}
      </div>

      <div class="col-md-2 col-xs-2 lists-tips">
          <ul class='company-list'>
              <li>
                  <div (click)='changeCom(0)' [ngClass]="firDot ? 'activeDot' : 'defaultDot'"></div>
              </li>
              <li>
                  <div (click)='changeCom(1)' [ngClass]="secDot ? 'activeDot' : 'defaultDot'"></div>
              </li>
              <li>
                 <div (click)='changeCom(2)' [ngClass]="thiDot ? 'activeDot' : 'defaultDot'"></div>
              </li>
              <li>
                 <div (click)='changeCom(3)' [ngClass]="fouDot ? 'activeDot' : 'defaultDot'"></div>
              </li>
          </ul>
      </div>

  </div>

</div>